import { createStyles } from 'antd-style';
import React from 'react';
import useLocale from '../../../../hooks/useLocale';
import CustomizationProvider, { LOCALES } from '../../common/CustomizationProvider';
import CustomizationSender from '../../common/CustomizationSender';

import { Flex, Skeleton } from 'antd';

const useStyle = createStyles(({ token, css }) => {
  return {
    container: css`
      display: flex;
      padding: ${token.paddingXL}px ${token.paddingMD}px;
      box-sizing: border-box;
      flex-direction: column;
      gap: ${token.paddingSM}px;
      height: 100%;
      width: 350px;
      background: #0000001a;
    `,
    content: css`
      padding: ${token.paddingXL}px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: ${token.padding}px;
    `,
    bubble_list: css`
      flex: 1;
    `,
    placeholder_bubble: css`
      .ant-welcome {
        padding: 0;
      }

      .ant-welcome-title {
        font-size: 16px !important;
        font-weight: 500 !important;
        opacity: 0.9;
      }

      .ant-welcome-description {
        font-size: 12px;
        opacity: 0.65;
      }

      .ant-welcome-icon {
        img {
          transform: scale(1.2);
          margin-inline-end: 10px;
        }
      }

      .ant-bubble-content {
        overflow: hidden;
        background: linear-gradient(135deg, #ffffff26 14%, #ffffff0d 59%) !important;
        width: 100%;
        border-radius: 16px;
        padding: 24px;
      }

      .ant-prompts {
        padding: 0;
      }

      .ant-prompts-item {
        background: rgba(255, 255, 255, 0.05);
        box-sizing: border-box;
        padding: 8px 16px;
        font-size: 12px;
        height: 36px;
        line-height: 36px;
        border: none;
        flex: 1;
      }
    `,
  };
});

const AssistantScene: React.FC = () => {
  const { styles } = useStyle();
  const [locale] = useLocale(LOCALES);

  const [content, setContent] = React.useState('');

  return (
    <CustomizationProvider>
      <Flex justify="space-between" style={{ height: '100%' }}>
        <div className={styles.content}>
          <Skeleton />
          <Skeleton />
          <Skeleton />
        </div>
        <div className={styles.container}>
          <CustomizationSender
            value={content}
            onChange={setContent}
            placeholder={locale.send_placeholder}
            onSubmit={(nextContent: any) => {
              if (!nextContent) return;
              setContent('');
            }}
          />
        </div>
      </Flex>
    </CustomizationProvider>
  );
};

export default AssistantScene;
